<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>商店 - 610书窝小程序</title>
  <link rel="stylesheet" href="../../assets/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">
  <style>
    /* 商店页面特定样式 */
    .mp-shop-categories {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--spacing-2);
      padding: var(--spacing-3);
      margin-bottom: var(--spacing-4);
    }

    .mp-category-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }

    .mp-category-icon {
      width: 60px;
      height: 60px;
      background-color: var(--light-bg-pink);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--spacing-1);
      color: var(--primary-pink);
      font-size: var(--fs-2);
    }

    .mp-category-name {
      font-size: var(--fs-6);
      color: var(--dark-pink-text);
    }

    .mp-products {
      padding: 0 var(--spacing-3);
      margin-bottom: var(--spacing-5);
    }

    .mp-section-title {
      font-size: var(--fs-3);
      color: var(--dark-pink-text);
      margin-bottom: var(--spacing-3);
      position: relative;
      padding-left: var(--spacing-2);
    }

    .mp-section-title::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 4px;
      background-color: var(--primary-pink);
      border-radius: 4px;
    }

    .mp-product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--spacing-3);
    }

    .mp-product-card {
      background-color: var(--white-1);
      border-radius: var(--radius-card);
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    .mp-product-img {
      width: 100%;
      height: 0;
      padding-bottom: 100%;
      position: relative;
    }

    .mp-product-img img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .mp-product-content {
      padding: var(--spacing-2);
    }

    .mp-product-title {
      font-size: var(--fs-5);
      margin-bottom: var(--spacing-1);
      color: var(--dark-pink-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mp-product-price {
      color: var(--primary-pink);
      font-weight: var(--fw-600);
      font-size: var(--fs-4);
      margin-bottom: var(--spacing-1);
    }

    .mp-product-sold {
      font-size: var(--fs-6);
      color: var(--medium-gray);
    }

    .mp-view-all {
      text-align: center;
      margin-top: var(--spacing-3);
    }

    .mp-view-all a {
      color: var(--secondary-pink);
      font-weight: var(--fw-500);
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .mp-view-all a i {
      font-size: 14px;
    }

    .mp-special-offer {
      background-color: var(--light-bg-pink);
      border-radius: var(--radius-card);
      padding: var(--spacing-3);
      margin: 0 var(--spacing-3) var(--spacing-4);
      position: relative;
      overflow: hidden;
    }

    .mp-offer-content {
      width: 60%;
    }

    .mp-offer-title {
      font-size: var(--fs-2);
      color: var(--dark-pink-text);
      margin-bottom: var(--spacing-2);
    }

    .mp-offer-desc {
      color: var(--medium-gray);
      margin-bottom: var(--spacing-3);
      font-size: var(--fs-5);
    }

    .mp-offer-btn {
      background-color: var(--primary-pink);
      color: var(--white-1);
      padding: var(--spacing-1) var(--spacing-3);
      border-radius: var(--radius-pill);
      font-weight: var(--fw-500);
      display: inline-block;
    }

    .mp-offer-img {
      position: absolute;
      right: var(--spacing-3);
      bottom: var(--spacing-3);
      width: 35%;
      height: auto;
    }
  </style>
</head>

<body>
  <!-- 头部导航 -->
  <header class="mp-header">
    <div class="mp-logo">
      <img src="../../assets/images/logo.svg" alt="610书窝">
    </div>
    <h1 class="mp-title">书窝商店</h1>
  </header>

  <!-- 主体内容 -->
  <main>
    <!-- 商品分类 -->
    <section class="mp-shop-categories">
      <a href="#" class="mp-category-item">
        <div class="mp-category-icon">
          <i class="fas fa-book"></i>
        </div>
        <span class="mp-category-name">小说</span>
      </a>
      <a href="#" class="mp-category-item">
        <div class="mp-category-icon">
          <i class="fas fa-graduation-cap"></i>
        </div>
        <span class="mp-category-name">学习</span>
      </a>
      <a href="#" class="mp-category-item">
        <div class="mp-category-icon">
          <i class="fas fa-coffee"></i>
        </div>
        <span class="mp-category-name">生活</span>
      </a>
      <a href="#" class="mp-category-item">
        <div class="mp-category-icon">
          <i class="fas fa-child"></i>
        </div>
        <span class="mp-category-name">童书</span>
      </a>
    </section>

    <!-- 特别优惠 -->
    <section class="mp-special-offer">
      <div class="mp-offer-content">
        <h3 class="mp-offer-title">新书特惠</h3>
        <p class="mp-offer-desc">新上架书籍 买二送一</p>
        <a href="#" class="mp-offer-btn">立即抢购</a>
      </div>
      <img src="../../assets/images/book.png" alt="特惠书籍" class="mp-offer-img">
    </section>

    <!-- 新品上架 -->
    <section class="mp-products">
      <h2 class="mp-section-title">新品上架</h2>
      <div class="mp-product-grid">
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="书籍1">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">夏日午后的阳光</h3>
            <div class="mp-product-price">¥32.80</div>
            <div class="mp-product-sold">已售 245</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="书籍2">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">心灵的旅程</h3>
            <div class="mp-product-price">¥45.50</div>
            <div class="mp-product-sold">已售 189</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="书籍3">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">时间的秘密</h3>
            <div class="mp-product-price">¥39.90</div>
            <div class="mp-product-sold">已售 156</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="书籍4">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">星空下的约定</h3>
            <div class="mp-product-price">¥36.80</div>
            <div class="mp-product-sold">已售 134</div>
          </div>
        </div>
      </div>
      <div class="mp-view-all">
        <a href="#">
          查看全部 <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </section>

    <!-- 热销榜单 -->
    <section class="mp-products">
      <h2 class="mp-section-title">热销榜单</h2>
      <div class="mp-product-grid">
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="热销书籍1">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">生活的艺术</h3>
            <div class="mp-product-price">¥58.00</div>
            <div class="mp-product-sold">已售 567</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="热销书籍2">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">思维的跃迁</h3>
            <div class="mp-product-price">¥49.90</div>
            <div class="mp-product-sold">已售 432</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="热销书籍3">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">儿童心理学入门</h3>
            <div class="mp-product-price">¥42.50</div>
            <div class="mp-product-sold">已售 389</div>
          </div>
        </div>
        <div class="mp-product-card">
          <div class="mp-product-img">
            <img src="../../assets/images/book.png" alt="热销书籍4">
          </div>
          <div class="mp-product-content">
            <h3 class="mp-product-title">情感的边界</h3>
            <div class="mp-product-price">¥38.80</div>
            <div class="mp-product-sold">已售 345</div>
          </div>
        </div>
      </div>
      <div class="mp-view-all">
        <a href="#">
          查看全部 <i class="fas fa-arrow-right"></i>
        </a>
      </div>
    </section>
  </main>

  <!-- 底部导航 -->
  <footer class="mp-tabbar">
    <a href="../../index.html" class="mp-tab-item">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </a>
    <a href="../shop/index.html" class="mp-tab-item active">
      <i class="fas fa-shopping-bag"></i>
      <span>商店</span>
    </a>
    <a href="../blog/index.html" class="mp-tab-item">
      <i class="fas fa-book-open"></i>
      <span>博客</span>
    </a>
    <a href="../about/index.html" class="mp-tab-item">
      <i class="fas fa-info-circle"></i>
      <span>关于</span>
    </a>
    <a href="../member/index.html" class="mp-tab-item">
      <i class="fas fa-user"></i>
      <span>我的</span>
    </a>
  </footer>

  <script src="../../assets/js/script.js"></script>
</body>

</html>